<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    const state = reactive({
      map: ref(null),
      mapBox: ref(null)
    })

    const init = () => {
      const xyz = new Tile({
        source: new XYZ({
          url: 'https://api.maptiler.com/maps/basic-4326/256/{z}/{x}/{y}.png?key=B3EG5uYPUvFucEWVoCa3',
          crossOrigin: 'anonymous'
        })
      })

      state.map = new Map({
        target: state.mapBox,
        layers: [xyz],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
          center: [0, 0], // 北京坐标
          zoom: 1 // 地图缩放级别（打开页面时默认级别）
        })
      })

      xyz.on('postrender', event => {
        var ctx = event.context
        ctx.save()
        var pixelRatio = event.frameState.pixelRatio
        var size = state.map.getSize()
        // 平移
        ctx.translate(size[0] / 2 * pixelRatio, size[1] / 2 * pixelRatio)
        // 缩放
        ctx.scale(3 * pixelRatio, 3 * pixelRatio)
        // 平移
        ctx.translate(-75, -80)
        ctx.beginPath()
        ctx.moveTo(75, 40)
        ctx.bezierCurveTo(75, 37, 70, 25, 50, 25)
        ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5)
        ctx.bezierCurveTo(20, 80, 40, 102, 75, 120)
        ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5)
        ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25)
        ctx.bezierCurveTo(85, 25, 75, 37, 75, 40)
        ctx.clip()
        ctx.translate(75, 80)
        ctx.scale(1 / 3 / pixelRatio, 1 / 3 / pixelRatio)
        ctx.translate(-size[0] / 2 * pixelRatio, -size[1] / 2 * pixelRatio)
      })

      xyz.on('rendercomplete', function (event) {
        var ctx = event.context
        ctx.restore()
      })
    }
    `
    return {
      code
    }
  }
}
</script>
